<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>13 发表评论</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
		}
		#box{
			width: 1000px;
			border: 1px solid #ccc;
			margin: 100px auto;
			padding: 20px;
		}
		#comment{
			width: 80%;
			padding: 10px 10px;
			font-size: 20px;
			outline: none;
		}
		.box_top{
			margin-bottom: 20px;
		}
		#comment_content li{
			border-bottom: 1px dashed #ccc;
			width: 800px;
			color: red;
			line-height: 45px;
		}
		#comment_content li a{
			float: right;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box_top">
			<textarea id="comment" cols="100" rows="10" placeholder="请输入您的评论"></textarea>
			<button id="btn">发布</button>
		</div>
		<ul id="comment_content">
			
		</ul>
	</div>
	<script type="text/javascript">
		window.onload = function(){
			// 1.监听按钮的点击
			$('btn').onclick = function(){
				// 1.1  获取用户输入的内容
				var content = $('comment').value;
				// console.log(content);
				// 1.2 判断
				if(content.length === 0){
					alert('请输入内容');
					return;
				}
				// 1.3  创建li标签插入到ul中
				var newLi = document.createElement('li');
				newLi.innerHTML = `${content}<a href = 'javascript:void(0)'>删除</a>`;
				// $('comment_content').appendChild(newLi);
				console.log($('comment_content').children);
				$('comment_content').insertBefore(newLi,$('comment_content').children[0]);

				// 1.4 清空输入框中的内容
				$('comment').value = ' ';

				// 1.5 删除评论 
				var delBtns = document.getElementsByTagName('a');
				for(var i = 0; i < delBtns.length; i++){
					delBtns[i].onclick = function(){
						this.parentNode.remove();
					}
				}
			};

			function $(id){
				return typeof id === 'string' ? document.getElementById(id) : null;
			}
		}
	</script>
</body>
</html>